<template>
    <div>
        <h1>欢迎登录，{{ userName }}</h1>

        <el-divider>
            <h3>今日待办</h3>
        </el-divider>
        <template>
            <h3>当前没有待处理的事项</h3>
        </template>
        
        <br/>
        <br/>
        <el-divider>
            <h3>请假事件</h3>
        </el-divider>
        <template v-if="existLeaveApplication !== 0">
            <h3>当前存在{{ existLeaveApplication }}个需要处理的请假申请，点击下面的按钮进入处理页面</h3>
            <el-button type="primary" @click="()=>{isShowLeaveManageDialog = true;}" round>点击进入请假处理页面</el-button>
            <el-dialog :visible="isShowLeaveManageDialog" :before-close="()=>{isShowLeaveManageDialog = false;}">
                <leave-manage></leave-manage>
            </el-dialog>
        </template>
        <template v-else>
            <h3>当前不存在需要处理的请假申请</h3>
        </template>
        <br/>
        <br/>

        <el-divider>
            <h3>缺勤提醒</h3>
        </el-divider>
        <template v-if="existClockAbsence !== 0">
            <h3>当前存在{{ existLeaveApplication }}个人当前缺勤，点击下面的按钮进入处理页面</h3>
            <el-button type="primary" @click="()=>{isShowClockInOutShowDialog = true;}" round>点击进入打卡展示页面</el-button>
            <el-dialog :visible="isShowClockInOutShowDialog" :before-close="()=>{isShowClockInOutShowDialog = false;}">
                <clock-in-out-show></clock-in-out-show>
            </el-dialog>
        </template>
        <template v-else>
            <h3>当前不存在需要处理的请假申请</h3>
        </template>
        <br/>
        <br/>
    </div>
</template>

<script>
    import axios from "axios";
    import leaveManage from "./leaveManage";
    import clockInOutShow from "./clockInOutShow";

    export default {
        name: "managerIndex",
        data: function () {
            return {
                userName: this.$store.state.userName,
                existLeaveApplication: 0,
                existClockAbsence: 0,
                isShowLeaveManageDialog: false,
                isShowClockInOutShowDialog: false
            }
        },
        methods: {
            /**
             * @description 获取所有的请假情况，并设置好数量
             * @function getExistLeaveApplication
             */
            getExistLeaveApplication: function () {
                console.log("getleaveAll");
                var _this = this;
                this.existLeaveApplication = 0;
                axios.get("http://localhost:8000/api/leave/all/")
                    .then(function (response) {
                        console.log(response.data);
                        response.data.data.leave_all.forEach(function (item, index) {
                            console.log(item.leave_status);
                            if (item.leave_status === "1") {
                                _this.existLeaveApplication += 1;
                            }
                        })
                        console.log(_this.existLeaveApplication);
                    })
                    .catch(function (error) {
                        console.log(error)
                    })
            },
            /**
             * @description 更改当前的页面
             * @function changeCurrentCompoent
             */
            changeCurrentCompoent: function (componentName) {
                this.$emit("changeCurrentCompoent", componentName);
            },
            /**
             * @description 获取今日的打卡情况，展示出未打卡的人
             * @function getExistClockAbsence
             */
            getExistClockAbsence: function () {
                //TODO: 此处元组件还未完成
            }
        },
        mounted: function () {
            this.getExistLeaveApplication();
            this.getExistClockAbsence();
        },
        components: {
            leaveManage,
            clockInOutShow
        }
    }
</script>

<style>

</style>
